<template>
  <div class="home-left">
    <div class="home-left-allInfo">
      <el-card>
        <el-row class="allInfo-row">
          <el-col :xs="24" :sm="12" :md="5" :lg="5" :xl="5" class="allInfo-row-user">
            <h3>{{ UserStore.userInfo.users?.name }}, {{ getTimeStateStr() }}!</h3>
          </el-col>
          <el-col :xs="24" :sm="12" :md="19" :lg="19" :xl="19" class="allInfo-row-project">
            <p class="title-date">{{ dayjs().format('YYYY年MM月DD日') }}</p>
            <el-row class="allInfo-row-project-type">
              <el-col
                :xs="12"
                :sm="12"
                :md="6"
                :lg="6"
                :xl="6"
                v-for="item in allInfo.project"
                :key="item.id"
              >
                <!-- <el-card style="margin-bottom: 10px">
                  <div class="grid-content">
                    <div class="left">
                      <el-icon style="font-size: 24px; color: white"><user /></el-icon>
                    </div>
                    <div class="right">
                      <div class="h2" style="color: #2d8cf0">
                        <count-to
                          :start-val="0"
                          :end-val="item.data"
                          :duration="2000"
                          :autoplay="true"
                        ></count-to
                      ></div>
                      <div>{{ item.name }} </div>
                    </div>
                  </div>
                </el-card> -->
                <p class="project-type">{{ item.name }}</p>
                <h2>{{ item.data }}</h2>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="home-left-involved">
      <el-card>
        <template #header>
          <div class="involved-header">
            <span class="header-title">我参与的项目</span>
            <el-button class="header-more" text>更多</el-button>
          </div>
        </template>
        <el-table :data="involved.data">
          <el-table-column
            v-for="item in involved.columns"
            :prop="item.id"
            :label="item.label"
            :width="item.width"
            :key="item.id"
            :sortable="item.sortable"
            :sort-orders="item.sortOrders"
            :show-overflow-tooltip="item.showTooltip"
          >
            <template #default="scope">
              <template v-if="['status', 'schedule'].includes(item.id)">
                <span :class="getStatus(scope.row['status'])">{{ scope.row[item.id] }}</span>
              </template>
              <template v-else>
                {{ scope.row[item.id] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="home-left-projectInfo">
      <el-card>
        <template #header>
          <div class="projectInfo-header">
            <el-select v-model="projectInfo.current" size="large">
              <el-option
                v-for="item in projectInfo.options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </template>
        <div class="projectInfo-body">
          <el-row>
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="projectInfo-detail">
              <p class="title">设计基本工程量</p>
              <el-table :data="projectInfo.detail">
                <el-table-column
                  v-for="item in projectInfo.columns"
                  :prop="item.id"
                  :label="item.label"
                  :width="item.width"
                  :key="item.id"
                  :show-overflow-tooltip="item.showTooltip"
                />
              </el-table>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="projectInfo-construction">
              <div class="construction-container">
                <p class="title">施工实际情况</p>
                <div class="construction-body">
                  <div id="construction-echart" ref="echartRef"></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
  // import { useUserStore } from '@/store/modules/user'
  // import { getTimeStateStr } from '@/utils/index'
  import dayjs from 'dayjs'
  import { nextTick, onMounted, reactive, ref } from 'vue'
     //@ts-ignore
  import echarts from '@/hooks/useEcharts'

  // const UserStore = useUserStore()

  const allInfo = reactive({
    project: [
      {
        type: 'all',
        id: 'all',
        name: '全部项目',
        data: '14',
      },
      {
        type: 'underWay',
        id: 'underWay',
        name: '进行中',
        data: '3',
      },
      {
        type: 'notStarted',
        id: 'notStarted',
        name: '未开始',
        data: '5',
      },
      {
        type: 'finish',
        id: 'finish',
        name: '已完成',
        data: '6',
      },
    ],
  })

  const involved = reactive({
    columns: [
      {
        label: '项目名称',
        id: 'name',
        width: 'auto',
        showTooltip: true,
      },
      {
        label: '区域',
        id: 'region',
        width: '100px',
      },
      {
        label: '业主或代建单位',
        id: 'agent',
        width: 'auto',
      },
      {
        label: '施工单位',
        id: 'construction',
        width: 'auto',
      },
      {
        label: '分包单位',
        id: 'subcontractor',
        width: 'auto',
      },
      {
        label: '项目投资(万元)',
        id: 'investment',
        width: 'auto',
        sortable: true,
        sortOrders: ['ascending', 'descending'],
      },
      {
        label: '合同金额',
        id: 'amount',
        width: 'auto',
        sortable: true,
        sortOrders: ['ascending', 'descending'],
      },
      {
        label: '状态',
        id: 'status',
        width: '120px',
      },
      {
        label: '项目进度',
        id: 'schedule',
        width: '100px',
      },
    ],
    data: [],
  })

  const getStatus = (data) => {
    return [
      'involved-status',
      {
        'status-primary': data == '进行中',
        'status-danger': data == '未开始',
        'status-success': data == '已完成',
      },
    ]
  }
  const getInvolvedData = async () => {
    // const userId = UserStore.userInfo.users.id
    // const [err, { success, message, data }] = await getInvolved({ userId })
    // if (success) {
    //   involved.data = data.map((it) => {
    //     if (it.schedule) {
    //       it.schedule = it.schedule + '%'
    //     }
    //     return it
    //   })
    // }
  }

  const projectInfo = reactive({
    current: '',
    options: [],
    columns: [
      {
        label: '型号规格',
        id: 'model',
        width: 'auto',
        showTooltip: true,
      },
      {
        label: '物料描述',
        id: 'desc',
        width: 'auto',
      },
      {
        label: '单位',
        id: 'unit',
        width: '80px',
      },
      {
        label: '数量',
        id: 'number',
        width: '80px',
      },
      {
        label: '修编原因',
        id: 'reason',
        width: 'auto',
      },
    ],
    detail: [],
  })

  const projectList = async () => {
    // const userId = UserStore.userInfo.users.id
    // const [err, { success, message, data }] = await getProjectList({ userId })
    // if (success) {
    //   projectInfo.options = data
    //   projectInfo.current = data[0].id
    // }
    projectDetail()
  }
  const projectDetail = async () => {
    const id = projectInfo.current
    let schedule = null
    // const [err, { success, message, data }] = await getProjectDetail({ id })
    // if (success) {
    //   projectInfo.detail = data.list
    //   schedule = data.schedule
    // }
    constructionEchart(schedule)
  }

  let echartObj: echarts.ECharts | null = null
  const echartRef = ref<HTMLElement | null>(null)
  const constructionEchart = (schedule: number | null) => {
    const options = {
      title: {
        show: true,
        text: '暂无数据',
        left: 'center',
        top: 'center',
        textStyle: {
          fontSize: 14,
          fontWeight: 'normal',
          color: '#999',
        },
      },
      grid: {
        width: '100%',
        height: '100%',
      },
    }
    if (schedule && typeof schedule == 'number') {
      options.title.show = false
      options['series'] = [
        {
          type: 'pie',
          name: 'construction',
          radius: ['50%', '85%'],
          avoidLabelOverlap: false,
          width: 'auto',
          height: '100%',
          top: '0',
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: true,
            position: 'center',
            fontSize: 20,
            fontWeight: 'bold',
            formatter: '{b}\n{d}%',
          },
          labelLine: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
              formatter: '{b}\n{d}%',
            },
          },
          data: [
            {
              name: '已完成',
              value: schedule,
            },
            {
              name: '未完成',
              value: 100 - schedule,
            },
          ],
        },
      ]
    }
    if (echartObj) {
      echartObj.dispose()
      echartObj = null
    }
    nextTick(() => {
      if (echartRef.value) {
        echartObj = echarts.init(echartRef.value as any, 'light', {
          locale: 'ZH',
        })
      }
      echartObj?.setOption(options, true)
    })
  }

  onMounted(() => {
    getInvolvedData()
    projectList()
  })
</script>
<style scoped lang="scss">
  .home-left {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;

    :deep(.el-card__body) {
      padding: 0;
    }

    .home-left-allInfo {
      flex: 2;
      margin-bottom: 10px;

      :deep(.el-card__body) {
        height: 100%;
      }

      :deep(.el-col) {
        text-align: center;
      }

      .allInfo-row {
        height: 100%;
      }

      .allInfo-row-user {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &::after {
          content: '';
          width: 1px;
          height: 80%;
          position: absolute;
          display: block;
          right: 0;
          top: 50%;
          transform: translate(0, -50%);
          background-color: #ccc;
        }
      }

      .allInfo-row-project {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        :deep(.el-col) {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
      }

      .title-date {
        margin-bottom: 10px;
        font-size: 16px;
      }

      .allInfo-row-project-type {
        flex: auto;
        align-items: center;

        .project-type {
          font-size: 18px;
        }

        h2 {
          font-size: 46px;
          font-weight: 400;
        }
      }
    }

    :deep(.el-card__header) {
      padding: 0 0 10px 0;
      max-height: 40px;
    }

    :deep(.el-button) {
      padding: 0;
      height: auto;
    }

    :deep(.el-card__body) {
      height: calc(100% - 40px);
    }

    .header-title {
      font-size: 20px;
      font-weight: bold;
    }

    .header-more {
      font-size: 16px;
    }

    :deep(.el-table__cell) {
      text-align: center;
    }

    .home-left-involved {
      flex: 3;
      margin-bottom: 10px;

      .involved-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .involved-status {
        font-size: 16px;
        // font-weight: bold;
      }

      .status-primary {
        color: var(--el-color-primary);
      }

      .status-danger {
        color: var(--el-color-danger);
      }

      .status-success {
        color: var(--el-color-success);
      }
    }

    .home-left-projectInfo {
      flex: 3;

      .projectInfo-body {
        .title {
          font-size: 20px;
          font-weight: bold;
          padding-bottom: 10px;
        }

        :deep(.el-table__body-wrapper) {
          max-height: 160px;
        }
      }

      .projectInfo-detail {
        padding-right: 10px;
      }

      .projectInfo-construction {
        padding-left: 10px;
      }

      .construction-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .construction-body {
        flex: auto;
        position: relative;

        &::after {
          content: '';
          width: 1px;
          height: 80%;
          position: absolute;
          display: block;
          left: -1px;
          top: 50%;
          transform: translate(0, -50%);
          background-color: #ccc;
        }
      }

      #construction-echart {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
